import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:ost_flutter_module/common/adapt.dart';
import 'package:ost_flutter_module/common/color.dart';
import 'package:ost_flutter_module/widget/custom_widget/custome_size_icon_button.dart';

class GSearchBar extends StatefulWidget {
  final String hintText;
  final double borderRadius;
  final Function(String) onSearch;
  final Function(String) onChanged;
  final VoidCallback onClear;

  GSearchBar({
    Key key,
    this.hintText,
    this.onSearch,
    this.onClear,
    this.borderRadius = 15,
    this.onChanged,
  }) : super(key: key);

  @override
  _GSearchBarState createState() => _GSearchBarState();
}

class _GSearchBarState extends State<GSearchBar> {
  bool _showClear = false;
  TextEditingController _controller;
  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    _controller.addListener(() {
      var value = _controller.text.length > 0;
      if (_showClear != value) {
        setState(() {
          _showClear = value;
        });
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  String get searchText => _controller.text;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: EdgeInsets.only(right: Adapt.px(10)),
        height: Adapt.px(30),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(Adapt.px(15)),
          color: Colors.white,
        ),
        child: Stack(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(width: Adapt.px(10)),
                Icon(Icons.search, color: color999999),
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    child: TextField(
                      controller: _controller,
                      textInputAction: TextInputAction.search,
                      decoration: InputDecoration(
                        // contentPadding: EdgeInsets.only(top: Adapt.px(-18)),
                        isCollapsed: true,
                        border: InputBorder.none,
                        labelStyle:
                            TextStyle(fontSize: 14, color: Color(0xFF333333)),
                        hintText: widget.hintText ?? '请输入',
                        hintStyle: TextStyle(fontSize: 14, color: color999999),
                      ),
                      onSubmitted: (s) {
                        if (_controller.text.isNotEmpty)
                          widget.onSearch(_controller.text);
                      },
                      onChanged: (value) {
                        if (value.isEmpty)
                          widget.onClear();
                        else
                          widget.onChanged(_controller.text);
                      },
                    ),
                  ),
                ),
              ],
            ),
            Positioned(
              right: 0,
              child: _showClear
                  ? GIconButton(
                      icon: Icons.cancel,
                      size: 16,
                      color: color999999,
                      onPressed: () {
                        _controller.clear();
                      })
                  : Container(),
            )
          ],
        ),
      ),
    );
  }
}
